import './style.css'
import 'ol/ol.css'
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import { OSM, XYZ, Vector } from 'ol/source';
import { LineString, Point } from 'ol/geom';
import Style from 'ol/style/Style';
import Stroke from 'ol/style/Stroke';
import VectorLayer from 'ol/layer/Vector';
import Feature from 'ol/Feature';
import VectorSource from 'ol/source/Vector';
import CircleStyle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';

// ol 事宜面向对象的形式设计 api 的 js 库，可以用来制作地图、图层、控件、交互等
/**
 * target: 地图容器
 * view: 地图视图
 * layers: 地图的图层（都有一个底图）
 * source: 图层的源
 */
const map = new Map({
    target: 'map', 
    view: new View({
        center: [114.3165, 30.5953], // 地图中心点
        zoom: 10, // 缩放级别
        projection: 'EPSG:4326', // 投影 默认情况下 ol 使用的不是经纬度坐标系 使用的是墨卡投影体系
    }),
    layers: [new TileLayer({
        source: new XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
        })
        // source: new OSM()
    })]
})

// 创建线要素
// const lineFeature = new Feature({
//     // 从南京到北京
//     geometry: new LineString([[114.3165, 30.5953],[116.407395, 39.904211]])
// })
// // 设置线要素央视
// lineFeature.setStyle(new Style({
//     stroke: new Stroke({
//         color: 'red',
//         width: 3
//     })
// }))

// 创建矢量源，将线要素添加到矢量源中
const lineSource = new VectorSource({
    features: []
})

// 创建矢量图层，将矢量源添加到矢量图层中
const lineLayer = new VectorLayer({
    source: lineSource
})

// 将矢量图层添加到地图中
map.addLayer(lineLayer)

function createPointFeature(coordinate){
    // 创建点要素
    const pointFeature = new Feature({
        geometry: new Point(coordinate)
    })
    // 设置点要素样式
    pointFeature.setStyle(new Style({
        image: new CircleStyle({
            fill: new Fill({
                color: 'red'
            }),
            radius: 5
        })
    }))
    // 将点要素添加到矢量源中
    const pointSource = new Vector({
        features: [pointFeature]
    })
    // 将点要素添加到矢量图层中
    const pointLayer = new VectorLayer({
        source: pointSource
    })
    // 将点要素添加到地图中
    map.addLayer(pointLayer)
}

// 点击画线要素
// 定义一个数组，用来存储点击的坐标
let lineArr = []
map.on('click', function(e) {
    // 获取点击坐标
    const coordinate = e.coordinate
    createPointFeature(coordinate)
    // 将点击坐标添加数组中
    lineArr.push(coordinate)
    // 判断数组长度是否为2
    if(lineArr.length === 2) {
        // 创建线要素
        const lineFeature = new Feature({
            geometry: new LineString(lineArr)
        })
        // 设置线要素样式
        lineFeature.setStyle(new Style({
            stroke: new Stroke({
                color: 'red',
                width: 2
            })
        }))
        // 创建矢量源，将线要素添加到矢量源中
        const lineSource = new VectorSource({
            features: [lineFeature]
        })
        // 创建矢量图层，将矢量源添加到矢量图层中
        const lineLayer = new VectorLayer({
            source: lineSource
        })
        // 将线要素添加到地图中
        map.addLayer(lineLayer)
        // 清空数组
        lineArr = []
    }
})